<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>工作日志</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <link media="all" rel="stylesheet" type="text/css" href="./assets/styles/quill.snow.css">

  <script type="text/javascript" src="./assets/scripts/quill.js"></script>
  <link href="./assets/styles/resize.css" rel="stylesheet" />
  <script src="./assets/scripts/resize.js"></script>

</head>

<body>
  <div class="container"> <!-- Flex容器 -->
    <!-- 左侧控制列 -->
    <div class="control-column">
      <!-- 输入框组 -->
      <div class="input-group">
        <input placeholder="作者姓名" class="titleStyle" id="author" />
        <input type="date" placeholder="选择日期" class="dateStyle" id="dailyLogDate" />
        <script>
          document.getElementById('dailyLogDate').valueAsDate = new Date();
        </script>
      </div>

      <!-- 按钮区域 -->
      <div class="button-group">
        <button class="myButton2" id="saveButton" onclick="onSaveClick()">提交保存</button>
      </div>
    </div>

    <!-- 右侧编辑器列 -->
    <div class="editor-column">
      <div id="QuillEditor"></div>
    </div>
  </div>
</body>

<script>
  var toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗 、斜体、底部横线、中间横线
    ["blockquote", "code-block"], // 引号 、 插入代码
    [{ 'list': "ordered" }, { 'list': "bullet" }], // 有序列表、 无序列表
    [{ 'size': ['small', false, 'large', 'huge'] }], // 大小
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ 'color': [] }, { 'background': [] }], // 字体颜色 、 背景颜色
    [{ 'align': [] }], // 排列方式
    [{ 'script': 'sub' }, { 'script': 'super' }], // 下标、 上标
    [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进
    [{ 'direction': 'rtl' }], // 方向
    ["clean"], // 清除样式
    ["link", "video", "image"]
  ];

  // 自定义标题行Blot
  const Block = Quill.import('blots/block');
  class LogHeaderBlot extends Quill.import("blots/block") {
    static blotName = "log-header";
    static className = "log-header"; // 明确指定类名[1,2](@ref)
    static tagName = "div";
    static create() {
      const node = super.create();
      node.classList.add("log-header");
      return node;
    }
  }
  Quill.register(LogHeaderBlot);
  //自定义分割线
  class LogDividerBlot extends Quill.import("blots/block") {
    static blotName = "log-divider";
    static className = "log-divider"; // 明确指定类名
    static tagName = "div";
    static create() {
      const node = super.create();
      return node;
    }
  }
  Quill.register(LogDividerBlot);

  var quill = new Quill('#QuillEditor', {
    modules: {
      toolbar: toolbarOptions,
      resize: {}
    },
    theme: 'snow'
  });
  function onSaveClick() {
    let author = document.getElementById("author").value;
    if (author.length < 1) {
      alert("作者姓名不能为空");
      return;
    }

    // 获取Quill编辑器内容并转换为HTML字符串
    let quillContent = quill.getSemanticHTML();
    if (quillContent.length < 1) {
      alert("文章内容不能为空");
      return;
    }

    // 从dailyLogDate输入框获取日期
    let selectedDate = document.getElementById('dailyLogDate').value;
    const data = {
      method: "UploadToDB",
      author: author,
      date: selectedDate,
      content: quillContent
    };
    sendMessageToCSharp(data);
  }
  function sendMessageToCSharp(value) {
    try {
      window.chrome.webview.postMessage(value);
    } catch (e) {
      console.error('消息发送失败：', e);
    }
  }
</script>
<style>
  /* 原有样式保留 */
  .titleStyle,
  .dateStyle,
  .paperTypeStyle {
    font-size: 24px;
    text-align: center;
    color: #333;
    font-weight: bold;
    padding: 10px;
    margin: 10px;
    border-radius: 35px;
    border: 1px solid #9C27B0;
  }

  #QuillEditorContainer {
    display: block;
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    background-color: #bbbbbbc9;
  }

  #QuillEditorContainerInner {
    display: block;
    width: 80%;
    height: 80%;
    position: relative;
    top: 10%;
    left: 10%;
    background-color: white;
  }

  /* 修复QuillEditor高度问题 */
  .container {
    display: flex;
    height: calc(100vh - 16px);
    /* 底部留出16px间距 */
    gap: 8px;
    box-sizing: border-box;
    margin: 8px;
    /* 四周都加上8px边距 */
    padding: 0;
    overflow: hidden;
  }

  .control-column {
    width: 220px !important;
    padding: 8px !important;
    display: flex;
    flex-direction: column;
    background: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  }

  .editor-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  #QuillEditor {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    overflow: hidden;
  }

  #QuillEditor .ql-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #QuillEditor .ql-editor {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    margin: 0;
  }

  #QuillEditor .ql-toolbar {
    flex-shrink: 0;
    padding: 4px !important;
    border-bottom: 1px solid #eee;
  }

  .input-group {
    display: flex;
    flex-direction: column;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .titleStyle,
  .dateStyle {
    width: 100% !important;
    margin: 0 !important;
    font-size: 18px !important;
    padding: 6px !important;
    border-radius: 20px !important;
    box-sizing: border-box;
  }

  .button-group {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed #ddd;
  }

  .myButton2 {
    width: 100%;
    padding: 8px !important;
    font-size: 16px !important;
    font-weight: bold;
    background: linear-gradient(135deg, #9C27B0, #FF5722);
    color: white;
    border: none;
    border-radius: 20px !important;
    cursor: pointer;
    transition: all 0.3s;
  }

  .myButton2:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(156, 39, 176, 0.3);
  }

  /* 响应式适配 */
  @media (max-width: 900px) {
    .container {
      flex-direction: column;
      height: calc(100vh - 16px);
      overflow-y: auto;
      margin: 8px;
    }

    .control-column {
      width: 100% !important;
      margin-bottom: 8px;
      flex-shrink: 0;
    }

    .editor-column {
      flex: 1;
      min-height: 0;
    }

    #QuillEditor .ql-editor {
      height: 50vh;
    }
  }

  /* 移除body默认边距 */
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  /* 自定义标题行 */
  .log-header {
    color: #2c5282; /* 使用深蓝色作为标题颜色，既显眼又不会太刺眼 */
    font-size: 1.2em;
    margin-bottom: 12px;
    font-family: 'Microsoft YaHei', sans-serif;
    font-weight: 700;  /* 将font-weight从500改为700使文字加粗 */
    text-shadow: 1px 1px 2px rgba(44, 82, 130, 0.1); /* 添加细微阴影提升层次感 */
  }

  /* 自定义标题行 */
  .log-divider {
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
  }
</style>

</html>